<template>
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activityList"
      :key="index"
      :color="activity.color || '#f9b05d'"
    >
      <!-- :color="activity.color"
      :timestamp="activity.timestamp" -->
      <h4 class="title">{{ activity.nodeName }}</h4>
      <el-card>
        <h4>操作人:{{ activity.assignee }}</h4>
        <h4>操作时间: {{ activity.createTime }}</h4>
        <!-- <template v-for="(item, idx) in activity.list" :key="idx">
          <h4 v-if="item">{{ item }}</h4>
        </template>
        <div v-if="activity.signFileList && activity.signFileList.length">
          <h4>会签记录:</h4>
          <el-upload
            name="uploadFile"
            :file-list="activity.signFileList"
            :on-preview="handlePreview"
          >
          </el-upload>
        </div> -->

        <div>
          <h4 v-for="(item, idx) in activity.opinion" :key="idx">
            <span>{{ item.name }}&nbsp;:&nbsp;</span>
            <template v-if="typeof item.content === 'string'">
              <span class="handle">{{ item.content }}</span>
            </template>

            <template v-else>
              <p class="text--info download-link subtext" v-for="(obj, ins) in item.content" :key="ins"  @click.prevent="handlePreview(obj)">
                <el-link :underline="false"  icon="el-icon-folder">{{ obj.name || obj.fileName }}</el-link>
              </p>
            </template>
          </h4>
        </div>
      </el-card>
    </el-timeline-item>
  </el-timeline>
  <el-empty v-if="!activityList.length" description="暂无记录"></el-empty>
</template>

<script lang="ts" setup>
import { defineProps, ref, watch } from "vue";
const props = defineProps({
  activities: {
    type: Array,
    default: () => []
  }
});

const activityList = ref([]);
const handlePreview = (item: any) => {
  if (item.response) {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
    );
  } else {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
    );
  }
};
watch(
  () => props.activities,
  newVal => {
    if (newVal && newVal.length) {
      activityList.value = [...props.activities];
      activityList.value.forEach(item => {
        if (item.opinion) {
          // const list = item.opinion.split("#e#");
          // if (item.opinion.indexOf("会签记录") > -1) {
          //   const fileList = list[list.length - 1];
          //   const signList = fileList.split("会签记录:");
          //   item.signFileList = JSON.parse(signList[signList.length - 1]);
          //   item.signFileList.map(el => {
          //     el["name"] = el.fileName;
          //   });
          //   item.list = list.slice(0, -1);
          // } else {
          //   item.list = [...list];
          // }
          //判断 item.opinion是否是json字符串
          if (typeof item.opinion === "string") {
            try {
              item.opinion = JSON.parse(item.opinion);
              item.opinion = item.opinion.filter(obj => {
                return obj.content?.length && obj.content != "undefined";
              });
            } catch (error) {
              item.opinion = [];
            }
          }
        }
      });
    }
  },
  { immediate: true }
);
</script>
<style lang="scss" scoped>
.title {
  margin: 0;
  margin-bottom: 10px;
}
.el-timeline-item:first-child{
  .title{
    margin-top:10px
  }
}

:deep .el-upload-list {
  margin-top: -30px;
}
:deep .el-timeline-item{
  padding-bottom:10px
}
:deep .el-timeline-item:last-child{
  padding-bottom:0
}
</style>
